import React from "react";
import { useEffect, useState } from "react";
import axios from "axios";
import "./publish.css";
import {
  ImageUploader,
  TextArea,
  Form,
  Input,
  Selector,
  Toast,
} from "antd-mobile";
import { Button } from "antd-mobile";
export default function Publish() {
  const [isNumeric, setIsNumeric] = useState(true);
  const [fileList, setFileList] = useState([]);
  const [value1, setValue] = useState("");
  const [title, setTitle] = useState("");
  const [desc, setDesc] = useState("");
  const user_id = JSON.parse(localStorage.getItem("user"))|| 0;
  const [type, setType] = useState("不知道");
  const upload = async (file) => {
    const formData = new FormData();
    formData.append("file", file);
    try {
      const response = await axios.post(
        "http://localhost:3000/zlp/up",
        formData
      );
      if (response.data.code === 200) {
        return {
          url: response.data.url,
        };
      }
    } catch (err) {
      console.error(err);
    }
  };
  const [form] = Form.useForm();
  //发布按钮
  const Fa = () => {
    form.validateFields().then(
      () => {
        if (!isNumeric) {
          Toast.show({
            icon: "fail",
            content: "价格只能是数字",
          });
          return;
        }
        if (user_id == 0) {
          Toast.show({
            icon: "fail",
            content: "请先登录",
          });
          return;
        }
        axios
          .post("http://localhost:3000/zlp/Fabu", {
            title,
            desc,
            price: value1,
            img: fileList,
            user_id,
            type,
          })
          .then((res) => {
            if (res.data.code === 200) {
              Toast.show({
                icon: "success",
                content: "发布成功",
              });
            }
          });
      },
      () => {
        Toast.show({
          icon: "fail",
          content: "请填写完整信息",
        });
      }
    );
  };
  //监听价格是不是数字

  useEffect(() => {
    const JGtype = /^[0-9]+$/;
    setIsNumeric(JGtype.test(parseInt(value1)));
  }, [value1]);
  const options = [
    {
      label: "日用品",
      value: "日用品",
    },
    {
      label: "玩具",
      value: "玩具",
    },
    {
      label: "学习用品",
      value: "学习用品",
    },
    {
      label: "数码宝贝",
      value: "数码宝贝",
    },

    {
      label: "不知道",
      value: "不知道",
    },
  ];
  return (
    <div
      style={{
        backgroundColor: "#edf2fa",
        width: "100%",
        height: "100vh",
        boxSizing: "border-box",
        padding: "15px",
      }}
    >
      <h1 style={{ display: "flex", justifyContent: "space-between" }}>
        <span>发闲置</span>
        <Button color="primary" fill="solid" onClick={Fa}>
          发布
        </Button>
      </h1>
      <div
        style={{
          width: "100%",
          height: "80%",
          backgroundColor: "#fff",
          borderRadius: "15px",
          marginTop: "15px",
          boxSizing: "border-box",
          padding: "15px",
        }}
      >
        <div style={{ width: "100%", height: "100px", marginTop: "30px" }}>
          <ImageUploader
            value={fileList}
            onChange={setFileList}
            upload={upload}
            maxCount={3}
          ></ImageUploader>
        </div>
        <div style={{ marginTop: "40px" }}>
          <TextArea
            placeholder="描述一下宝贝的品牌型号、货品来源..."
            rows={5}
            style={{
              margin: "0 auto",
              width: "350px",
              "--font-size": "20px",
            }}
            onChange={(val) => {
              setDesc(val);
            }}
          ></TextArea>
        </div>

        <Form form={form}>
          <Form.Item
            label="宝贝名称"
            name="title"
            rules={[{ required: true, message: "请输入名称" }]}
          >
            <Input
              placeholder="请输入闲置名称"
              onChange={(val) => {
                setTitle(val);
              }}
            />
          </Form.Item>
          <Form.Item
            label="价格"
            name="price"
            rules={[{ required: true, message: "请输入价格" }]}
          >
            <Input
              placeholder="请输入价格"
              onChange={(val) => {
                setValue(val);
              }}
            />
          </Form.Item>
          <Form.Item label="宝贝分类">
            <Selector
              columns={3}
              options={options}
              defaultValue={["不知道"]}
              onChange={(arr, extend) => {
                setType(arr[0]);
              }}
            />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
